<script setup lang="ts">
import { getAllMenuApi, getPermissionApi } from "@/api/menu";
import { onMounted, ref } from "vue";
import PermissionFrom from "./component/PermissionFrom.vue";
const menuTree = ref<any>([]);
const PermissionFromRef = ref<any>(null);
const menu = ref<any>(null);
const permissionTable = ref<any>([]);
// 获取数据
const getTableData = async () => {
  const res = await getAllMenuApi({});
  menuTree.value = res;
  // console.log(res);
  // const MenuTree = (menu: any) => {
  //   return menu.map((item: any) => {
  //     return {
  //       value: item.id,
  //       label: item.meta.title,
  //       children:
  //         item?.children && item.children?.length
  //           ? MenuTree(item.children)
  //           : [],
  //     };
  //   });
  // };

  // menuTree.value = MenuTree(res);
};

const addPermission = () => {
  PermissionFromRef.value.open(menu.value.id);
};

const editorPermission = (data: any) => {
  PermissionFromRef.value.open(menu.value.id, JSON.parse(JSON.stringify(data)));
};

const delPermission = (id: string) => {
  console.log("删除", id);
};

onMounted(() => {
  getTableData();
});

const nodeClick = async (node: any) => {
  // console.log(node);
  menu.value = node;
  const ret = await getPermissionApi(node);
  console.log(ret);
  permissionTable.value = ret.permission;
};
</script>

<template>
  <PermissionFrom ref="PermissionFromRef" />
  <div class="permission">
    <div class="left">
      <el-tree
        ref="treeRef"
        style="max-width: 600px"
        class="filter-tree"
        node-key="id"
        @node-click="nodeClick"
        :data="menuTree"
        default-expand-all
        :props="{
          label: (node) => node.meta.title,
          children: 'children',
        }"
      />
    </div>
    <div class="right">
      <div class="title">
        <ElButton @click="addPermission" type="primary">新增菜单权限</ElButton>
      </div>
      <el-table
        :data="permissionTable"
        row-key="id"
        border
        style="width: 100%; margin-bottom: 20px"
        default-expand-all
      >
        <el-table-column type="index" width="65" />
        <el-table-column prop="name" label="权限名称" width="140">
        </el-table-column>
        <el-table-column prop="path" label="权限路径" width="140">
        </el-table-column>
        <el-table-column label="操作" width="140">
          <template #default="scope">
            <el-button
              type="primary"
              size="small"
              @click="editorPermission(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="primary"
              size="small"
              @click="delPermission(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<style scoped lang="less">
.permission {
  display: flex;
  .left {
    width: 300px;
  }
}
</style>
